<template>
  <div id="c2c_user" class="absolute left-0 top-0 bottom-160 w-full c2c_user">
    <div class="w-full h-full top">
      <order-nav  style="background: var(--theme-color)"/>
      <div class="flex pl-32 pr-32 mt-20 overflow-auto">
        <div
            class="avatar w-70 h-70 flex items-center font-700 font-34 justify-center"
            @click="handleGoUserHome"
        >
          <img class="w-full h-full rounded-full" :src="ctc_user.headImg" alt="">
        </div>
        <div class="ml-25 text-white">
          <div class="font-34">{{ ctc_user.nickName }}</div>
          <div class="mt-17 font-24">{{ctc_user.c2cUserType ? $t('认证用户') : $t('未认证用户')}}</div>
          <div class="flex items-center mt-28 font-26">
            <div class="flex items-center h-30 mr-48">
              <span class="mr-12">{{$t('邮箱')}}</span>
              <img class="w-20 h-20 relative top-4" v-if="party.email_authority" src="~@/assets/image/c2c/gou.png" alt="">
              <img class="w-20 h-20 relative top-4" v-else src="~@/assets/image/c2c/no.png" alt="">
            </div>
            <div class="flex items-center h-30 mr-48">
              <span class="mr-12">{{$t('手机')}}</span>
              <img class="w-20 h-20 relative top-4" v-if="party.phone_authority" src="~@/assets/image/c2c/gou.png" alt="">
              <img class="w-20 h-20 relative top-4" v-else src="~@/assets/image/c2c/no.png" alt="">
            </div>
            <div class="flex items-center h-30 mr-48">
              <span class="mr-12">{{$t('身份')}}</span>
              <img class="w-20 h-20 relative top-4" v-if="party.kyc_authority" src="~@/assets/image/c2c/gou.png" alt="">
              <img class="w-20 h-20 relative top-4" v-else src="~@/assets/image/c2c/no.png" alt="">
            </div>
            <div class="flex items-center h-30 mr-48">
              <span class="mr-12">{{$t('高级认证')}}</span>
              <img class="w-20 h-20 relative top-4" v-if="party.kyc_highlevel_authority" src="~@/assets/image/c2c/gou.png" alt="">
              <img class="w-20 h-20 relative top-4" v-else src="~@/assets/image/c2c/no.png" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
        ref="content"
        class="content absolute left-0 bottom-0 w-full bg-white pt-40 box-border overflow-auto"
    >
      <div class="pr-50 pl-50">
        <div class="flex" style="color: #868D9A">
          <div class="flex-1">
            <h2 class="mb-18 font-700 font-40 text-black">{{ctc_user.thirtyDaysOrder}}</h2>
            <div class="font-28">{{$t('30日成单数')}}</div>
          </div>
          <div class="flex-1">
            <h2 class="mb-18 font-700 font-40 text-black">{{ctc_user.thirtyDaysOrderRatio}}%</h2>
            <div class="font-28">{{$t('30日成单率')}}</div>
          </div>
        </div>
        <div class="w-full mt-54">
          <van-cell-group class="w-full font-24 box-border">
            <van-cell class="mb-28" title="平均放行" :value="ctc_user.thirtyDaysPassAverageTime"/>
            <van-cell title="平均付款" :value="ctc_user.thirtyDaysPayAverageTime"/>
          </van-cell-group>
        </div>
      </div>

      <div class="flex items-center justify-center mt-30 more pb-32 mb-48" @click="enterMore">
        <span class="font-25 mr-12">{{$t('更多数据')}}</span>
        <span><van-icon name="arrow" color="#868D9A"/></span>
      </div>

      <div class="font-28">
        <van-cell-group class="w-full font-24 box-border pr-50 pl-50">
          <user-cell
            :left-img="require('@/assets/image/c2c/group287.png')"
            title="收款方式"
            :value="payMethodNum || '--'"
            @cell-click="$router.push({
              path: '/paymentMethod',
              query: {
                ctc_user: JSON.stringify(ctc_user)
              }
            })"
          />
          <user-cell
              class="mt-100"
              :left-img="require('@/assets/image/c2c/Subtract.png')"
              title="C2C帮助中心"
              @cell-click="$router.push({
                path: '/c2cHelpCenter'
              })"
          />
          <user-cell
              class="mt-100"
              :left-img="require('@/assets/image/c2c/group288.png')"
              title="C2C通知设置"
              @cell-click="enterSettings"
          />
          <!--是接单模式的情况下-->
          <template v-if="orderMode">
            <user-cell
                class="mt-100"
                :left-img="require('@/assets/image/c2c/Subtract-2.png')"
                title="成为认证广告方"
                @cell-click="$router.push({
                path: '/CertifiedAdvertiser'
              })"
            />
            <user-cell
                class="mt-100"
                :left-img="require('@/assets/image/c2c/Subtract-3.png')"
                title="添加C2C到桌面"
            />
          </template>
        </van-cell-group>
      </div>
      <div class="mt-40 px-34 mb-74" v-if="orderMode">
        <van-button class="w-full rounded-lg" @click="switchPlaceAnOrder" type="info" color="#1D91FF">切换到“下单模式”</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import {
  mapState
} from "vuex";
import {SET_ORDER_MODE} from "@/store/const.store";
import {Cell, CellGroup, Icon,Button} from 'vant';
import OrderNav from "@/components/order-nav/OrderNav";
import UserCell from "@/page/c2cUser/components/UserCell";
import otcApi from "@/API/otc.js";

export default {
  name: "c2cUser",
  data() {
    return {
      email: "cn*****.com",
      ctc_user:{},
      party:{},
      payMethodNum: '',
    }
  },
  created() {
    this.ctcUserGetUserCenter()
  },
  methods: {
    ctcUserGetUserCenter(){ // 获取页面信息
      otcApi.ctcUserGetUserCenter({ language: this.$i18n.locale }).then(res=>{
        const  {c2c_user, party } = res.data || {}
        this.ctc_user = c2c_user // 用户信息
        this.party = party // 验证信息
        otcApi.ctcPaymentMethodType({ party_id: this.ctc_user.c2cUserPartyId, language: this.$i18n.locale }).then(res => {
          console.log(res)
          this.payMethodNum = Object.keys(res.data).length
        })
      })
    },
    enterMore() {
      let ctc_user = JSON.stringify(this.ctc_user)
      this.$router.push({ path: '/c2cUser/c2cUserMore', query: { ctc_user }})
    },
    // 进入通知设置
    enterSettings() {
      let ctc_user = JSON.stringify(this.ctc_user)
      this.$router.push({ path: '/c2cNoticeSettings', query: { ctc_user } })
    },
    switchPlaceAnOrder() {
      this.$router.replace({
        path:'/wantBuy'
      })

      this.$store.commit(`c2c/${SET_ORDER_MODE}`, {
        state: false,
      })
    },
    handleGoUserHome() {
      console.log(this.ctc_user.id)
      this.$router.push({
        path: '/advertiserDetail',
        query: {
          uid: this.ctc_user.id
        }
      })
    },
  },
  computed: {
    ...mapState('c2c', ['orderMode'])
  },
  components: {
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Icon.name]: Icon,
    [Button.name]:Button,
    OrderNav,
    UserCell,
  }
}
</script>

<style lang="scss" scoped>
.c2c_user{
  width: 100%;
  box-sizing: border-box;
  ::v-deep .van-nav-bar {
      background: #1D91FF;
    ::after {
      content: none;
    }
    .van-icon {
        color: #fff;
      }
  }
}
.top {
  height: 370px;
  background: #1D91FF;


  .avatar {
    border-radius: 50%;
    background: #21262F;
    color: #fff;
  }
}

.content {
  top: 300px;
  border-radius: 70px 70px 0 0;

  .more {
    position: relative;
    border-bottom: 1px solid #484756;
    color: #868D9A;

    .van-icon {
      font-size: 20px;
      font-weight: 600;
    }
  }
}
</style>
